<?php

?>
<html>
	<head>
		<link rel="stylesheet" type="text/css" href="include/css/cssFicha.css" />
		<script type="text/javascript" src="include/jquery/funcionesjqueryFicha.js"></script>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<script src="include/jquery/jquery.contextMenu.js" type="text/javascript"></script>
		<link href="include/css/jquery.contextMenu.css" rel="stylesheet" type="text/css" />
		
		<script type="text/javascript">
			$(document).ready( function() {
				crearContextMenu();
			});
			var value;
			function crearContextMenu()
			{
				var capa = document.getElementById("caracteristicas");
				var texto = capa.getElementsByClassName("textoCar");
				var aux;
				for( var x = 0; x < texto.length ; x++ ) {
					aux = texto[x];
					value = aux.value;
					$(aux).contextMenu({
						menu: 'dadero'
						},
						function(action, el, pos) {
						var valor = $(el).attr('value');
						switch(action)
						{			
						case "muyfacil":
							alert("tirada +20")
						    var ha = valor;
						    tiradamuyfacil(ha);
						break;
						case "facil":
							alert("Tirada +10 ");
						 	var ha = valor;
							tiradafacil(ha);
						break;
						case "normal":
							alert("Tirada +0 ");
						 	var ha = valor;
						    tiradanormal(ha);
						break;
						case "dificil":
							alert("Tirada -10 ");
							var ha = valor;
						    tiradadificil(ha);
						break;
						case "muydificil":
							var ha = valor;
							alert("Tirada -20 ");
							tiradamuydificil(ha);
						break;
						case "otro":
						alert("Introducir dificultad");
						break;
					}
					});
				}
				  function tiradamuyfacil (atributo) {
      var random=Math.round(Math.random()*100);
      attactualizado = parseInt(atributo)+20;
      if (random<=(attactualizado)) 
      {
      	alert(random+"<="+(attactualizado)+"Superada");	
      }else
      {
       	alert(random+">"+(attactualizado)+"Fallida");		
      };
    }
        
        function tiradafacil (atributo) {
      var random=Math.round(Math.random()*100);
            attactualizado = parseInt(atributo)+10;

      if (random<=(attactualizado)) 
      {
      	alert(random+"<="+(attactualizado)+"Superada");	
      }else
      {
       	alert(random+">"+(attactualizado)+"Fallida");		
      };
    } 
        function tiradanormal (atributo) {
      var random=Math.round(Math.random()*100);
      if (random<=atributo) 
      {
      	alert(random+"<="+atributo+"Superada");	
      }else
      {
       	alert(random+">"+atributo+"Fallida");		
      };
    }  
        function tiradadificil (atributo) {
      var random=Math.round(Math.random()*100);
                  attactualizado = parseInt(atributo)-10;

            if (random<=(attactualizado)) 
      {
      	alert(random+"<="+(attactualizado)+"Superada");	
      }else
      {
       	alert(random+">"+(attactualizado)+"Fallida");		
      };
    }
        function tiradamuydificil (atributo) {
      var random=Math.round(Math.random()*100);
                  attactualizado = parseInt(atributo)-20;

            if (random<=(attactualizado)) 
      {
      	alert(random+"<="+(attactualizado)+"Superada");	
      }else
      {
       	alert(random+">"+(attactualizado)+"Fallida");		
      };
    }
    
			}
		</script>
		<!--<link rel="stylesheet" type="text/css" media="screen, projection" href="include/css/demo.css" />-->
		<!-- <script type="text/javascript" src="include/jquery/jquery.backgroundPosition.js"></script>
		<script>
			
			$(document).ready(function() {
				
				$('.firerift-style').live('click', function() {
					checkboxID		= '#' + $(this).attr('rel');

					$("form input:checkbox").click(function () {
						
						$(this).hide();
					});
					if($(checkboxID)[0].checked == false) {
					
						$(checkboxID)[0].checked = true;
						$(this).removeClass('off').addClass('on');
						
					} else {
						
						$(checkboxID)[0].checked = false;
						$(this).removeClass('on').addClass('off');
						
					}
				});
				
				$('.firerift-style-checkbox, .firerift-style-checkbox').each(function() {
					
					thisID		= $(this).attr('id');
					thisClass	= $(this).attr('class');

					switch(thisClass) {
						case "iphone-style-checkbox":
							setClass = "iphone-style";
						break;
						case "firerift-style-checkbox":
							setClass = "firerift-style";
						break;
					}
					
					$(this).addClass('hidden');
					
					if($(this)[0].checked == true)
						$(this).after('<div class="'+ setClass +' on" rel="'+ thisID +'">&nbsp;</div>');
					else
						$(this).after('<div class="'+ setClass +' off" rel="'+ thisID +'">&nbsp;</div>');
				});
			});
			
		</script> -->
	</head>
	<body>
		<div id="cSeccion" class="seccion"><!-- Seccion central -->
			<div id="tabsFicha">
	    		<div id="tabCar" class="tabF"><a>Caracteristicas</a></div>
	    		<div id="tabEqui"class="tabF"><a>Equipo</a></div>
	    	</div>	
	        <form id="fichaPersonaje" class="noActivo">
	        	<div id="datos" class="boxUrban-top">
	        		<h2>Datos personales</h2>           		
	        		<div class="datCol">
	            		<label>Nombre del personaje</label>
						<input type="text" name="nombre"/><br/>
						<label>Carrera</label>
						<input type="text" name="carrera"/><br/>
						<label>Peculiaridad</label>
						<input type="text" name="peculiaridad"/><br/>
						<label>Altura</label>
						<input type="text" name="altura"/><br/>
						<label>Color de ojos</label>
						<input type="text" name="cojos"/>
					</div>					
					<div class="datCol">
						<label>Nombre del Jugador</label>
						<input type="text" name="nombrejug"/><br/>
						<label>Predestinación</label>
						<input type="text" name="predestinacion"/><br/>
						<label>Sexo</label>
						<input type="text" name="sexo"/><br/>
						<label>Peso</label>
						<input type="text" name="peso"/><br/>
						<label>Color de piel</label>
						<input type="text" name="cpiel"/>
					</div>					
					<div class="datCol">
						<label>Mundo Natal</label>
						<input type="text" name="mundo"/><br/>
						<label>Rango</label>
						<input type="text" name="rango"/><br/>
						<label>Complexion</label>
						<input type="text" name="complexion"/><br/>
						<label>Edad</label>
						<input type="text" name="edad" /><br/>
						<label>Color de pelo</label>
						<input type="text" name="cpelo" />	
					</div>				     		
	        	</div>           	
	        	<div id="caracteristicas" class="boxUrban-bottom">
	        		<h2>Atributos</h2>
	        		         		
	        		<div class="wCar">        			
	        			<label>HA</label><input id="HA" type="text" value="12" class="textoCar"/>
	        			<a>Habilidad de armas</a><br/>   
	        		</div>
	        		           		
	        		<div class="wCar">        			
	        			<label>HP</label><input id="HP" type="text" value="32" class="textoCar"/>
	        			<a>Habilidad de proyectiles</a><br/> 
	        		</div>        		  
	        		            		
	        		<div class="wCar">        			
	        			<label>F</label><input id="F" type="text" value="" class="textoCar"/>
	        			<a>Fuerza</a><br/>
	        		</div>        		
	        		
	        		<div class="wCar">        			
	        			<label>R</label><input id="R" type="text" value="" class="textoCar"/>
	        			<a>Resistencia</a><br/>
	        		</div>        		
	        		
	        		<div class="wCar">        			
	        			<label>AG</label><input id="Ag" type="text" value="" class="textoCar"/>
	        			<a>Agilidad</a><br/>
	        		</div>
	        		
	        		<div class="wCar">        			
	        			<label>INT</label><input id="Int" type="text" value="" class="textoCar"/>
	        			<a>Inteligencia</a><br/>
	        		</div>
	        		
	        		<div class="wCar">        			
	        			<label>PER</label><input id="Per" type="text" value="" class="textoCar"/>
	        			<a>Percepcion</a><br/>
	        		</div>
	        		
	        		<div class="wCar">        			
	        			<label>VOL</label><input id="Vol" type="text" value="" class="textoCar"/>
	        			<a>Voluntad</a><br/>
	        		</div>
	        		
	        		<div class="wCar">        			
	        			<label>EMP</label><input id="Emp" type="text" value="" class="textoCar"/>
	        			<a>Empatia</a><br/>
	        		</div>
	        	</div>
	        	<div id="hBasicas" class="boxUrban-bottom">
	        		<h2>Habilidades basicas</h2></br>
	        		<div class="hInfo">Nombre </div>
	        		<div class="adq"> Adq&nbsp;&nbsp;&nbsp;+10&nbsp;&nbsp;&nbsp;+20 </div>        			
	        		<div class="habilidad">	            		
						<a class="h">Aguante (R)</a>
						<input type="checkbox" id="chk1" class="firerift-style-checkbox" name="adquirida"/>
						<input type="checkbox" id="chk2" class="firerift-style-checkbox" name="plus10"/>
						<input type="checkbox" id="chk3" class="firerift-style-checkbox" name="plus20"/>
					</div>
					<div class="habilidad">
						<a class="h">Movimiento silencioso (Ag)</a>
						<input type="checkbox" id="chk4" class="firerift-style-checkbox" name="adquirida"/>
						<input type="checkbox" id="chk5" class="firerift-style-checkbox" name="plus10"/>
						<input type="checkbox" id="chk6" class="firerift-style-checkbox" name="plus20"/>
					</div>
	        	</div>
	        	<div id="hAvanzadas" class="boxUrban-middle">
	        		<h2>Habilidades Avanzadas</h2></br>
	        		<div class="hInfo">Nombre </div>
	        		<div class="adq"> Adq&nbsp;&nbsp;&nbsp;+10&nbsp;&nbsp;&nbsp;+20</div>
	        		<div class="habilidad">	            		
						<a class="h">Hablar idioma (Gotico) (Int)</a>
						<input type="checkbox" id="chk7" class="firerift-style-checkbox" name="adquirida"/>
						<input type="checkbox" id="chk8" class="firerift-style-checkbox" name="plus10"/>
						<input type="checkbox" id="chk9" class="firerift-style-checkbox" name="plus20"/>
					</div>
					<div class="habilidad">
						<a class="h">Saber popular (Bajos fondos) (Int)</a>
						<input type="checkbox" id="chk10" class="firerift-style-checkbox" name="adquirida"/>
						<input type="checkbox" id="chk11" class="firerift-style-checkbox" name="plus10"/>
						<input type="checkbox" id="chk12" class="firerift-style-checkbox" name="plus20"/>
					</div>
					</br>
					<input type="button" class="" name="add" value="Nueva habilidad"/>
	        	</div>
	        	<div id="talentos" class="boxUrban-bottom">
	        		<h2>Talentos</h2></br>
	        		<div class="hInfo">Nombre</div>
	        		<div class="talento">	            		
						<a class="lblTalent">Ataque veloz</a>
						<input type="checkbox" id="chk13" class="firerift-style-checkbox" name="adquirida"/>
					</div>
					<div class="talento">
						<a class="lblTalent">Ataque relampago</a>
						<input type="checkbox" id="chk14" class="firerift-style-checkbox" name="adquirida"/>
					</div>
					</br>
					<input type="button" class="" name="add" value="Nuevo talento"/>
	      		</div>
	      	</form>
	    	<form id="fichaEquipo" class="noActivo">
	    		<div id="p-equip-bg">
	    			<div class="p-seccion-bg phead">
	    			</div>
	    			<div class="wrapper- pArm">
	    				<div class="p-seccion-bg  pD">
	    				</div>
	    				<div class="p-seccion-bg pI">
	    				</div>
	    			</div>
	    			<div class="p-seccion-bg pBody">
	    			</div>
	    			<div class="wrapper- pLegs">
	    				<div class="p-seccion-bg pD">
	    				</div>	
	    				<div class="p-seccion-bg pI">
	    				</div>
	    			</div>
	    			<div class="p-seccion-bg pBoots">
	    			</div>
	    		</div>	
	    	</form>
	    </div><!-- Fin Seccion central -->  
	        
	    <ul id="dadero" class="contextMenu">
			<li class="muy facil"><a href="#muyfacil">Muy Facil</a></li>
			<li class="facil"><a href="#facil">Facil</a></li>
			<li class="normal"><a href="#normal">Normal</a></li>
			<li class="dificil"><a href="#dificil">Dificil</a></li>
			<li class="muy dificil"><a href="#muydificl">Muy Dificil</a></li>
			<li class="otro"><a href="#otro">Otro</a></li>
		</ul>
</body>
</html>